<!doctype html>
<html lang="en">
<head>

<?php include './inc/css.html'; ?>

<style type="text/css">

</style>

</head>
<body>
<div class="floaticon top ion-android-arrow-up"></div>
<?php include './inc/header.html'; ?>
<!-- 轮播图 -->
<!-- <div class="line1"></div> -->
<div id="banner-course" class="swiper-container ">
    <div class="swiper-wrapper">
        <?php for ($i=1;$i<3;$i++) { ?>
           <div class="swiper-slide" style="background-image:url(../../assets/img/banner<?php echo $i; ?>.jpg)">
            <a class="_text_teriary tc" href="javascript:void(0);" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.1s">
                <p class="bannertitle lh4 ani" swiper-animate-effect="<?php echo $i%2?'fadeInDown':'fadeInLeft'; ?>" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">最好的职业教育服务者</p>
                <p class="bannersubtitle lh2 ani" swiper-animate-effect="<?php echo $i%2?'fadeInUp':'fadeInRight'; ?>" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">新职教新实训</p>
            </a>
           </div>
        <?php } ?>
    </div>
    <!-- 如果需要滚动条 -->
    <!-- <div class="swiper-scrollbar"></div> -->
</div>

<div class="wrap" id="course">



<!-- End 新闻资讯 -->
<div class="line1 dn"></div>
<!-- Start 课程-->
<div class="sectionheader tc dn">
    <div class="sectiontitle">课程专区</div>
    <div class="sectionsubtitle">最新动态</div>
    <!-- <a href="#" class="more lh4 tc"><span class="tran3">查看更多</span></a> -->
</div>
<div class="line1"></div>
<div class="section clearfix limit-width">
    <!-- 缩略图自定义内容 -->
    <div class="row">
      <div class="col-xs-4">
        <div class="icon tc wow slideInLeft filter active" data-filter="filtergood filtertime" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
          <span class="ion-ios-albums-outline tran3" ></span>
          <div class="icon-caption tran3 " >
            所有课程
          </div>
        </div>
      </div>  

      <div class="col-xs-4">
        <div class="icon tc wow fadeIn filter" data-filter="filtergood " data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
          <span class="ion-thumbsup tran3"></span>
          <div class="icon-caption tran3 " data-filter="filtergood ">
           推荐课程
          </div>
        </div>
      </div> 

       <div class="col-xs-4">
        <div class="icon tc wow slideInRight filter" data-filter=" filtertime" data-wow-duration="1s"  data-wow-offset="10"  data-wow-iteration="1">
          <span class="ion-ios-time-outline tran3"></span>
          <div class="icon-caption tran3 ">
            最新课程
          </div>
        </div>
      </div>
    </div>
</div> 

<div class="line1"></div>
<!-- 缩略图自定义内容 -->
<!-- Start 新闻资讯 -->

<div class="light-background">
     <!-- 缩略图自定义内容 -->
    <div class="section clearfix limit-width">
        <div class="row list" id="courselist">
        <?php include './inc/courselist.html'; ?>
        </div>
    </div>
</div>
<!-- End 新闻资讯 -->


<div class="dbpages  limit-width dn">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>
   
<!-- End 课程-->

<div class="line1"></div>
</div>
<?php include './inc/footer.html'; ?>
</body>

<?php include './inc/js.html'; ?>
<script type="text/javascript">
$(document).ready(function(){
  // 初始化轮播图
  var bannerSwiper = new Swiper ('#banner-course', {
        autoplay: {
          delay: 10000,
        },
        effect : 'fade',
        fade: {
          crossFade: false,
        },
        autoplayDisableOnInteraction:false,
        on:{
          init: function(){
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          } 
        }
        // scrollbar: '.swiper-scrollbar'
    } ) ;


})




</script>
<script type="text/javascript">

    $(function () {

        var filterList = {

            init: function () {

                // MixItUp plugin

                $('#courselist').mixitup({

                    targetSelector: '.filteritem',

                    filterSelector: '.filter',

                    // effects: ['fade'],

                    // easing: 'snap',

                    // call the hover effect

                    // onMixEnd: filterList.hoverEffect()

                });             

            },

            

            hoverEffect: function () {

                // Simple parallax effect

                // $('#courselist .filteritem').hover(

                //     function () {

                //         $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');

                //         $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');             

                //     },

                //     function () {

                //         $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');

                //         $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                               

                //     }       

                // );              

            }

        };

    
        // Run the show!

        filterList.init();
   
        initfooter();
        
    }); 

    </script>


</html>